<template>
  <mavon-editor
      class="md"
      :value="this.blogContent"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :ishljs="true"
      :toolbars="toolbars"
      xss-options="null"
      codeStyle="idea"
      :externalLink="externalLink"
  ></mavon-editor>
</template>
<script>
import 'mavon-editor/dist/css/index.css'
import mavonEditor from 'mavon-editor'
import Vue from "vue";

Vue.use(mavonEditor)
export default {
  props: [
    'blogContent'
  ],
  data() {
    return {
      toolbars: {
        navigation: true // 导航目录
      },
      externalLink : {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return '/cdn-lib/markdownCss/github-markdown.min.css'
        },
        hljs_css: function() {
          // 这是你的hljs文件路径
          return '/cdn-lib/highlight/highlight.min.js'
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return '/cdn-lib/KaTex/katex.min.css'
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return '/cdn-lib/KaTex/katex.min.js'
        },
        hljs_js:false
      }
    }
  },


}
</script>